Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jordy Vialoux 73 posts 103 karma points
    Aug 08, 2012 @ 23:34
    Jordy Vialoux
    0

    Umbraco Node Sorting | XSLT

    Hey Guys,

    I am displaying a list of "News Articles" on a page but the client wants the list to refelect the newest "News Article" you have created - not using umbraco's node stack order.

    Here is my XSLT code so far - this includes a paginator.

    <!-- Pagination Variables -->
      
    <xsl:variable name="recordsPerPage" select="5"/>
    <xsl:variable name="pageNumber" >
      <xsl:choose>
        <xsl:when test="umbraco.library:RequestQueryString('page') &lt;= 0 or string(umbraco.library:RequestQueryString('page')) = '' or string(umbraco.library:RequestQueryString('page')) = 'NaN'">
        0
        </xsl:when>
        <xsl:otherwise>
        <xsl:value-of select="umbraco.library:RequestQueryString('page')" />
        </xsl:otherwise>
      </xsl:choose>
    </xsl:variable>
    <xsl:variable name="numberOfRecords" select="count($currentPage/NewsArticles/NewsArticle)" />
      
    <!-- List Articles -->
      
    <ul id="list-news-articles">
      <xsl:for-each select="$currentPage/NewsArticles/NewsArticle">
        <xsl:if test="position() &gt; $recordsPerPage * number($pageNumber) and  position() &lt;= number($recordsPerPage * number($pageNumber) +  $recordsPerPage )">
          <li class="clearfix">
            <href="{umbraco.library:NiceUrl(@id)}">
            <xsl:if test="articleThumb &gt; 0">
              <xsl:variable name="img" select="umbraco.library:GetMedia(articleThumb, 0)" />
              <xsl:variable name="imgPath" select="concat(substring-before($img/umbracoFile,'.'), '.jpg')" />
              <img class="person-image" src="/ImageGen.ashx?image={$imgPath}&amp;width=150&amp;" alt="{@nodeName}" />
            </xsl:if>
          </a>
            <class="list-news-heading" href="{umbraco.library:NiceUrl(@id)}">
              <xsl:value-of select="@nodeName" />
            </a>
            <div class="article-brief">
              <span class="featured-date">
                <xsl:value-of select="newsArticleDate" />,
                <xsl:value-of select="newsArticleCategory" />
              </span>
              <p>
                <xsl:value-of select="articleBrief" />
                <class="read-more" href="{umbraco.library:NiceUrl(@id)}">
                  Read More...
                </a>
              </p>
            </div>
          </li>
        </xsl:if>
      </xsl:for-each>
    </ul>
      
    <!-- Paginator -->
      
    <ul class="pagination clearfix">
      <li class="prev">
        <xsl:if test="$pageNumber &gt; 0">
          <href="?page={$pageNumber -1}">Prev</a>
        </xsl:if>
      </li>
      <li class="pages">
        <xsl:call-template name="for.loop">
          <xsl:with-param name="i">1</xsl:with-param>
          <xsl:with-param name="page" select="$pageNumber +1"></xsl:with-param>
          <xsl:with-param name="count" select="ceiling(count($currentPage/NewsArticles/NewsArticle) div $recordsPerPage)" />
        </xsl:call-template>
      </li>
      <li class="next">
        <xsl:if test="(($pageNumber +1 ) * $recordsPerPage) &lt; ($numberOfRecords)">
          <href="?page={$pageNumber +1}">Next</a>
        </xsl:if>
      </li>
    </ul>
      
    </xsl:template>
        
        
    <!-- XSLT Template For Loop DO NOT EDIT-->
        
    <xsl:template name="for.loop">
      <xsl:param name="i"/>
      <xsl:param name="count"/>
      <xsl:param name="page"/>
      <xsl:if test="$i &lt;= $count">
        <xsl:if test="$page != $i">
          <href="{umbraco.library:NiceUrl($currentPage/@id)}?page={$i - 1}" >
            <xsl:value-of select="$i" />
          </a>
        </xsl:if>
        <xsl:if test="$page = $i">
          <span class="current-page">
            <xsl:value-of select="$i" />
          </span>
        </xsl:if>
      </xsl:if>
      <xsl:if test="$i &lt;= $count">
        <xsl:call-template name="for.loop">
          <xsl:with-param name="i">
            <xsl:value-of select="$i + 1"/>
          </xsl:with-param>
          <xsl:with-param name="count">
            <xsl:value-of select="$count"/>
          </xsl:with-param>
          <xsl:with-param name="page">
            <xsl:value-of select="$page"/>
          </xsl:with-param>
        </xsl:call-template>
      </xsl:if>
    </xsl:template>

    All suggestions are welcome - if you have any questions I will be watching the thread. 

    Jordy

  • Jordy Vialoux 73 posts 103 karma points
    Aug 08, 2012 @ 23:36
    Jordy Vialoux
    0

    Sorry forgot a vital piece of info - The client wants the "latest news article" to display first on the front end.

    You may have already got that but just being clear.

    Jordy

  • Dan 1285 posts 3917 karma points c-trib
    Aug 08, 2012 @ 23:49
    Dan
    0

    Hi Jordy,

    You want to sort the articles by date right?  So you'll need to add an XSLT sort element to your loop:

    <xsl:for-each select="$currentPage/NewsArticles/NewsArticle">
        <xsl:sort select="articleDate"  order="ascending" />

    ...where 'articleDate' is the alias of your article date property.

  • Jordy Vialoux 73 posts 103 karma points
    Aug 09, 2012 @ 00:00
    Jordy Vialoux
    0

    Yes by "created date". 

    I have an alias within the doc type named "newsArticleDate" however, this doesn't use a date picker - the user just inputs text into the field. 

    Will I need to use the umbraco date picker in order for this to "order" correctly? 

    Is it possible to pick up the "Created" property on the node within the "properties" tab? If so I think that may be a better solution.

    Thanks for your post Dan.

    Jordy

  • Dan 1285 posts 3917 karma points c-trib
    Aug 09, 2012 @ 00:06
    Dan
    1

    Sure, the createdDate is stored in the XML cache so you can use this to sort by, no probs:

    <xsl:sort select="@createDate" order="ascending" />

    As a point of interest, to give you an idea of the data that's actually in your selection you can do something like this:

    <textarea><xslt:copy-of select="$currentPage/NewsArticles/NewsArticle" /></textarea>

    I just find this sometimes helps to actually see the data you're manipulating through XSLT.

  • Jordy Vialoux 73 posts 103 karma points
    Aug 09, 2012 @ 00:10
    Jordy Vialoux
    0

    That works a treat - thanks Dan! 

    Jordy

Please Sign in or register to post replies

Write your reply to:

Draft